<template>
	<div style="height: 100%;" id="shopping-cart">
		<!--头部-->
		<v-header>
		</v-header>
		<!--头部下方背景图片-->
		<div class="back_Img">
			<img src="../static/images/1_02.png">
		</div>
		<!--文字-->
		<div class="character">
			<div class="character_body">
				我的购物车　　<span>{{totalNums}}个商品</span>
			</div>
			<div class="line"></div>
			<div class="zero"></div>
		</div>
		<div v-if="goodInfo.length > 0" class="shopping_Cart">
			<table id="cartTable" style="position: relative;">
				<thead>
					<tr class="order_content">
						<th class="check che">
							<P>顺芝堂商城 <img src="../static/images/voucher_03.png"></P>
						</th>
						<th class="commodity">商品信息</th>
						<th class="specification"></th>
						<th>单价(元)</th>
						<th>数量</th>
						<th>金额</th>
						<th>操作</th>
					</tr>

				</thead>
				<tbody>
					<tr v-for="item in goodInfo" class="order_content">
						<td class="check">
							<div class="checkbox">
								<input @click="per_checked_click" v-bind:checked="per_checked" id="checkbox1" class="styled check_one check" name="items" type="checkbox">
								<label for="checkbox1"></label>
							</div>
						</td>
						<td class="goods"><img :src="src+item.pic" style="width: 91px;height: 91px;" /><span>{{item.goodsName}}</span></td>
						<td>{{item.standard}}</td>
						<td class="price">
							<p>￥{{item.origin}}</p>￥{{item.price}}</td>
						<td class="count">
							<span @click="reduce_nums" class="reduce">-</span>
							<input @change="num_input_change" v-model="goodsNums" class="count_input" type="text" value="1">
							<span @click="add_nums" class="add">+</span>
						</td>
						<td class="subtotle">￥{{(item.price*goodsNums).toFixed(2)}}</td>
						<td class="operation">
							<span class="delete">
								<a @click="centerDialogVisible = true" href="javascript:void(0);" id="btn1">使用抵用券</a>
							</span>
							<span>　
								<a @click="deleteGoods(cartId)" href="javascript:void(0);"  class="delete">删除</a>
							</span><br>
							<div class="checkbox one">
								<input @click="selectCheckbox" id="checkbox2" class="styled check_one check" type="checkbox">
								<label for="checkbox2">
                                线下已支付
                            </label>
							</div>
						</td>
					</tr>

				</tbody>

			</table>
			<div id="footer" class="footer">
				<div class="footer_Left" style="float: left; margin-left: 16px;padding-top: 5px;">
					<div class="checkbox ter">
						<input @click="all_checked_click" v-bind:checked="all_checked" id="checkbox7" class="check_all styled check_one check" type="checkbox">
						<label for="checkbox7" class="for">全选</label>
					</div>
					<a @click="deleteGoods(cartId)" class="fl delete_all" id="deleteAll" href="javascript:void(0);">删除</a>
				</div>
				<div class="footer_right" style="float: right">
					<div @click="settleClick" class="fr closing">结算</div>
					<div class="fr selected_totle" style="margin-top: 7px;">合计(不含运费)：<span id="priceTotle">￥ {{all_money.toFixed(2)}}</span></div>
					<!--<div class="fr selectAll" id="selected">已选商品
						<span id="selectTotle">0</span>件
					</div>-->
				</div>

			</div>
		</div>
		<div v-else>
			<div class="shopCar_empty">

			</div>
			<p style="text-align: center;padding-bottom: 20px;">购物车暂无商品</p>
		</div>
		<!-- 弹出层 -->
		<el-dialog title="请输入店铺抵用金额" :visible.sync="centerDialogVisible" width="30%" center>
			<div style="margin:0 auto;width:338px;text-align: center;">
				<input @change="(shopReward < 0) ? shopReward = 0 : shopReward = shopReward" v-model="shopReward" type="number" id="shopReward_input" style="" />
			</div>
			<span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false" style="background:#732d1c;color:#fff;outline:none;">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false"  style="background:#732d1c;outline:none;">确 定</el-button>
  </span>
		</el-dialog>
		<!--脚部-->
		<v-footer>

		</v-footer>
	</div>
</template>
<script>
	export default {
		created() {
			this.$api.get('/front/carts', null, r => {
				console.log('购物车1r', r)
				this.totalNums = r.data.dataCount
				if(r.data.list.length === 0) {
					this.isShow = true
					this.isShowCar = false
				} else {
					this.goodInfo = r.data.list
					console.log('this.goodInfo', this.goodInfo)
					this.isShow = false
					this.isShowCar = true
					this.goodId = r.data.list[0].goodsId
					this.cartId = r.data.list[0].cartId
					this.price = r.data.list[0].price
					this.goodsNums = r.data.list[0].goodsNum
				}

			})
		},
		data() {
			return {
				isShow: false,
				isShowCar: true,
				goodInfo: [],
				per_checked: false,
				all_checked: false,
				src: this.$src,
				goodId: 1,
				cartId: 0,
				goodsNums: 1,
				edit_wrap_show: false,
				goods_wrap_show: true,
				all_money: 0,
				price: 0,
				totalNums: 0,
				centerDialogVisible: false,
				shopReward: 0,
				isPay: false
			}
		},
		methods: {
			settleClick: function() {
				var _this = this
				var self = this
				if(_this.per_checked === false) {
					return _this.$message('您未选择商品！');
				}
				if(this.isPay === false) {
					this.isPay = 0
				} else {
					this.isPay = 1
				}
				this.goodsNums = parseInt(this.goodsNums)
				this.$api.post('/front/orders', {
					goodsId: this.goodId,
					goodsNum: this.goodsNums,
					isPay: this.isPay,
					shopReward: this.shopReward,
				}, r => {
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
						this.$api.post('/front/carts/deletes', {
							ids: [self.cartId]
						}, r => {
							self.$router.go(0)
						})
					} else {
						self.$message(r.error);
						return false
					}
				})
			},
			editBtnClick: function() {
				this.edit_wrap_show = true
				this.goods_wrap_show = false
			},
			wanBtnClick: function(price) {
				this.edit_wrap_show = false
				this.goods_wrap_show = true
				if(this.per_checked === true) {
					this.all_money = this.goodsNums * this.price
				}
			},
			deleteGoods: function(cartId) {
				var _this = this
				var self = this
				console.log('cartId', cartId)
				this.$api.post('/front/carts/deletes', {
					ids: [cartId]
				}, r => {
					console.log('删除r', r)
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
					self.$router.go(0)
				})
			},
			per_checked_click: function() {
				if(this.per_checked === true) {
					this.per_checked = false
					this.all_checked = false
					this.all_money = 0
				} else {
					this.per_checked = true
					this.all_checked = true
					this.all_money = this.price * this.goodsNums
				}
			},
			all_checked_click: function() {
				if(this.all_checked === true) {
					this.per_checked = false
					this.all_checked = false
					this.all_money = 0
				} else {
					this.per_checked = true
					this.all_checked = true
					this.all_money = this.price * this.goodsNums
				}
			},
			reduce_nums: function() {
				this.goodsNums--
					if(this.goodsNums < 1) {
						this.goodsNums = 1
					}
				if(this.per_checked === true) {
					this.all_money = this.price * this.goodsNums
				}
			},
			add_nums: function() {
				this.goodsNums++
					if(this.per_checked === true) {
						this.all_money = this.price * this.goodsNums
					}
			},
			num_input_change: function() {
				this.goodsNums = parseInt(this.goodsNums)
				if(typeof(this.goodsNums) != 'number' || this.goodsNums < 1) {
					this.goodsNums = 1
				}
			},
			selectCheckbox: function() {
				this.isPay = !this.isPay
			},
			initPage: function() {
				var self = this
				self.$api.get('/front/carts', null, r => {
					self.totalNums = r.data.dataCount
					if(r.data.list.length === 0) {
						self.isShow = true
						self.isShowCar = false
					} else {
						self.goodInfo = r.data.list
						self.isShow = false
						self.isShowCar = true
						self.goodId = r.data.list[0].goodsId
						self.cartId = r.data.list[0].cartId
						self.price = r.data.list[0].price
						self.goodsNums = r.data.list[0].goodsNum
					}

				})
			}
		},
		watch: {
			per_checked: {
				handler: function(curVal, oldVal) {
					console.log('curVal', curVal)
					console.log('oldVal', oldVal)
					if(curVal === true) {
						console.log('this.all_money', this.all_money)
						this.all_money = this.goodsNums * this.price
						console.log('this.goodsNums', this.goodsNums)
						console.log('this.price', this.price)

					}

				}
			}
		}

	}
</script>